
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>自定义console</title>
    <style type="text/css">
        .console_log {
            border: 1px solid #CCC;
            color: #333;
            padding: 0px 5px;
            min-height: 24px;
            line-height: 24px;
            margin-bottom: -1px;
        }

        .console_info {
            border: 1px solid #CCC;
            color: #333;
            padding: 0px 5px;
            min-height: 24px;
            line-height: 24px;
            margin-bottom: -1px;
            background: url("") no-repeat scroll 0 1px #EBF5FF;
            padding-left: 30px;
        }

        .console_warn {
            border: 1px solid #CCC;
            color: #333;
            padding: 0px 5px;
            min-height: 24px;
            line-height: 24px;
            margin-bottom: -1px;
            background: url("") no-repeat scroll 0 1px #FFFFC8;
            padding-left: 30px;
        }

        .console_error {
            border: 1px solid #CCC;
            color: #FF0000;
            padding: 0px 5px;
            min-height: 24px;
            line-height: 24px;
            margin-bottom: -1px;
            background: url("") no-repeat scroll 0 1px #FFEBEB;
            padding-left: 30px;
        }

        .console_group {
            margin-top: 20px;
            font-size: 16px;
            font-weight: bolder;
        }

        .console_log_function {
            color: green;
        }
    </style>
    <script type="text/javascript">
      var console = {
        assert: function () {
        },
        clear: function () {
        },
        count: function () {
        },
        debug: function () {
        },
        dir: function () {
        },
        dirxml: function () {
        },
        error: function () {
          var args = Array.prototype.slice.call(arguments);
          consoleHelper.showerror(args.join(" "));
        },
        exception: function () {
        },
        group: function (name) {
          consoleHelper.showgroup(name);
        },
        groupCollapsed: function () {
        },
        groupEnd: function () {
        },
        info: function () {
          var args = Array.prototype.slice.call(arguments);
          if (args.length == 1) {
            if (arguments[0] instanceof Array) {
              consoleHelper.showinfo("[" + args[0] + "]");
            } else if (arguments[0] instanceof Function) {
              consoleHelper.showinfo(args[0], "console_log_function");
            } else {
              consoleHelper.showinfo(args[0]);
            }
          } else {
            consoleHelper.showinfo(args.join(" "));
          }
        },
        log: function () {
          var args = Array.prototype.slice.call(arguments);
          if (args.length > 1) {
            var i = 1, hasstyle = false;
            if (args[0].indexOf("%c") == 0) {
              args[0] = args[0].replace(/%c/, "");
              i = 2;
              hasstyle = true;
            }
            for (; i < args.length; i++) {
              if (/%s|%d|%i|%o/.test(args[0])) {
                args[0] = args[0].replace(/%s|%d|%i|%o/, args[i]);
              } else {
                break;
              }
            }
            if (i < args.length) {
              args[0] = args[0] + " " + args.slice(i).join(" ");
            }
            if (hasstyle) {
              consoleHelper.showlog(args[0], args[1]);
            } else {
              consoleHelper.showlog(args[0]);
            }
          } else if (args.length == 1) {
            if (arguments[0] instanceof Array) {
              consoleHelper.showlog("[" + args[0] + "]");
            } else if (arguments[0] instanceof Function) {
              consoleHelper.showlog(args[0], null, "console_log_function");
            } else {
              consoleHelper.showlog(args[0]);
            }
          } else {
            consoleHelper.showlog("");
          }
        },
        memoryProfile: function () {
        },
        memoryProfileEnd: function () {
        },
        profile: function () {
        },
        profileEnd: function () {
        },
        table: function () {
        },
        time: function () {
        },
        timeEnd: function () {
        },
        timeStamp: function () {
        },
        trace: function () {
        },
        warn: function () {
          var args = Array.prototype.slice.call(arguments);
          if (args.length == 1) {
            if (arguments[0] instanceof Array) {
              consoleHelper.showwarn("[" + args[0] + "]");
            } else if (arguments[0] instanceof Function) {
              consoleHelper.showwarn(args[0], "console_log_function");
            } else {
              consoleHelper.showwarn(args[0]);
            }
          } else {
            consoleHelper.showwarn(args.join(" "));
          }
        }
      };
      var consoleHelper = {
        showlog: function (val, style, cla) {
          if (cla) {
            cla = "console_log " + cla;
          } else {
            cla = "console_log";
          }
          this.show(val, style, cla);
        },
        showinfo: function (val, cla) {
          if (cla) {
            cla = "console_info " + cla;
          } else {
            cla = "console_info";
          }
          this.show(val, null, cla);
        },
        showwarn: function (val, cla) {
          if (cla) {
            cla = "console_warn " + cla;
          } else {
            cla = "console_warn";
          }
          this.show(val, null, cla);
        },
        showerror: function (val) {
          this.show(val, null, "console_error");
        },
        showgroup: function (val) {
          if (!val) {
            val = "";
          }
          this.show(val + ":", null, "console_group");
        },
        show: function (val, style, cla) {
          if (document.getElementById("showconsole")) {
            var div = document.createElement("div");
            if (div.setAttribute) {
              if (style) {
                div.setAttribute("style", style);
              }
            } else {
              if (style) {
                div = document.createElement("<div style=" + style + ">");
              }
            }
            if (cla) {
              div.className = cla;
            }
            var oText = document.createTextNode(val);
            div.appendChild(oText);
            document.getElementById("showconsole").appendChild(div);
          }
        }
      };
      window.onload = function () {
        console.group("log");
        console.log('%c a %s This is red text on a green background', 'color:red; background-color:#EEE');
        console.log("The %%s jumped over %d tall buildings", 1, "abc", 1);
        console.log("I am %s and I have:", "abc", "bcd", "cde");
        console.log("abc", 1);
        console.log([1, 2, 3, 4, 5]);
        console.log();
        console.log(test);
        console.group("info");
        console.info('%c a %s This is red text on a green background', 'color:red; background-color:#EEE');
        console.info("The %%s jumped over %d tall buildings", 1, "abc", 1);
        console.info("I am %s and I have:", "abc", "bcd", "cde");
        console.info("abc", 1);
        console.info([1, 2, 3, 4, 5]);
        console.info();
        console.info(test);
        console.group("warn");
        console.warn('%c a %s This is red text on a green background', 'color:red; background-color:#EEE');
        console.warn("The %%s jumped over %d tall buildings", 1, "abc", 1);
        console.warn("I am %s and I have:", "abc", "bcd", "cde");
        console.warn("abc", 1);
        console.warn([1, 2, 3, 4, 5]);
        console.warn();
        console.warn(test);
        console.group("error");
        console.error('%c a %s This is red text on a green background', 'color:red; background-color:#EEE');
        console.error("The %%s jumped over %d tall buildings", 1, "abc", 1);
        console.error("I am %s and I have:", "abc", "bcd", "cde");
        console.error("abc", 1);
        console.error([1, 2, 3, 4, 5]);
        console.error(test);
      }

      function test() {
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
        alert("abc");
      }
    </script>
</head>
<body>
<h1>自定义console(Artwl.cnblogs.com)</h1>
<div id="showconsole"></div>
</body>
</html>
